import { SettingModelState } from '@/models/setting';
import { Layout, Form, Input, Menu, Dropdown } from 'antd';
import { NavLink } from 'react-router-dom';
import { getLocale, Link, SearchModelState, setLocale, useDispatch, useIntl, useSelector } from 'umi';
import styles from './index.less';
import { SearchOutlined, TranslationOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { Drawer, Button } from 'antd';
import { DrawerProps } from 'antd/es/drawer';
import Theme from '@/components/Theme';
import classNames from 'classnames';
const { Header } = Layout;
const locales: { [key: string]: string } = {
    'zh-CN': 'zh',
    'en-US': 'en',
    'zh': 'zh',
    'en': 'en'
}
const CommonHerder = () => {
    const dispatch = useDispatch();
    const { setting, pageSetting } = useSelector((state: { setting: SettingModelState }) => state.setting);
    const { search } = useSelector((state: { search: SearchModelState }) => state.search);
    const [visible, setVisible] = useState(false);
    const [size, setSize] = useState<DrawerProps['size']>();
    const showDefaultDrawer = () => {
        setSize('default');
        setVisible(true);
    };
    const showLargeDrawer = () => {
        setSize('large');
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };
    const onFinish = (values: any) => {
        console.log('---------------------------', values);
        dispatch({
            type: 'search/getSearch',
            payload: values.search
        })
    };
    const intl = useIntl();

    useEffect(() => {
        setLocale(locales[getLocale()]);
    }, []);
    const menu = <Menu>
        <Menu.Item key="zh" onClick={() => setLocale('zh', false)}>{intl.formatMessage({ id: 'zh', defaultMessage: '中文' })}</Menu.Item>
        <Menu.Item key="en" onClick={() => setLocale('en', false)}>{intl.formatMessage({ id: 'en', defaultMessage: '英文' })}</Menu.Item>
    </Menu>
    return <Header className={styles.header}>
        <div className={classNames(styles.containerA, 'container')}>
            <div className={styles.left}>
                <NavLink to='/'><div className={styles.logo} dangerouslySetInnerHTML={{ __html: setting.systemLogo! }}></div></NavLink>
                <li><Link to='/'>{intl.formatMessage({ id: 'article' })}</Link></li>
                <li><Link to='/archives'>{intl.formatMessage({ id: 'archives' })}</Link></li>
                <li><Link to='/knowledge'>{intl.formatMessage({ id: 'knowledgeBooks' })}</Link></li>
                {
                    pageSetting.map(item => {
                        return <li key={item.id}><Link to={`/page/${item.path}`}>{item.name}</Link></li>
                    })
                }

            </div>
            <div className={styles.right}>
                <li>
                    <Dropdown overlay={menu}>
                    <TranslationOutlined />
                    </Dropdown>
                </li>
                <li><Theme /></li>
                <li><span onClick={showLargeDrawer}><SearchOutlined /></span></li>
            </div>
            <Drawer
                size={size}
                placement="bottom"
                onClose={onClose}
                visible={visible}>
                <h1>文章搜索</h1>
                <Form name="nest-messages" onFinish={onFinish}>
                    <Form.Item
                        name="search"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Button type="primary" htmlType="submit" onClick={onFinish} >搜索</Button>
                    <br />
                    {
                        search && search.map((item) => {
                            return <Link to={`/article/${item.id}`} className={styles.articleList} >{item.title}</Link>
                        })
                    }
                </Form>
            </Drawer>

        </div>
    </Header>
}
export default CommonHerder
